import Base from './Base';
import Cover from './Cover';
import P1 from './P1';
import P2 from './P2';
import P3 from './P3';
import P4 from './P4';
import P5 from './P5';
class preHeat {

    constructor() {
        this.className = 'mom';
        this.cmp = {
            cover: new Cover(),
            p1: new P1(),
            p2: new P2(),
            p3: new P3(),
            p4: new P4(),
            p5: new P5(this)
        }
        this.sts = {
            audio: 'audio_mom_img',
            helper: 'position_mom_css',
            child: 'child',
            cover: 'cover',
            p1: 'p1',
            p2: 'p2',
            p3: 'p3',
            p4: 'p4',
            p5: 'p5'
        }
        this.bgAudio = new Audio('res/audio/SunDacing.mp3');
    }

    render() {
        let that = this;
        let re = (obj)=> {
            let str = "";
            for (var index in obj) {
                if (obj.hasOwnProperty(index)) {
                    str += `<div class="child ${that.sts[index]}">
                                        ${that.cmp[index].render()}
                                  </div>`;
                }
            }
            return str;
        };
        return `
        <div class="mom">
             <div class="audio_mom_img"></div>
             <div class="position_mom_css">
                ${re(this.cmp)}
            </div>
            <div class="loading_mom_container">
             <!--   <div class="icon_loading_img"></div>-->
                <div class="pack_loading_container">
                <div class="progress_loading_state"></div>
                </div>
                <div class="trying_loading_text">努力加载中。。。</div>
            </div>
            <div class="guide_mom_collection">
                <div class="arrow_guide_img"></div>
                <div class="tiptoe_guide_img"></div>
            </div>
            <div class="progress_mom_placeholder"></div>
        </div>
    `;
    }

    afterRender() {
        let _ = require('../middleware/utils');
        _.e = _.str2class;
        let images = ['./res/img/cover/p1-bg.png', './res/img/p1/bg1.png', './res/img/p2/bg2.png'];
        let tmp_img = new Image();
        let index = 0;
        let that = this;
        tmp_img.onload = function () {
            index++;
            document.querySelector('.progress_loading_state').style.width = index * 100 / images.length + '%';
            if (index < images.length - 1) {
                tmp_img.src = images[index];
            } else {
                setTimeout(function () {
                    _.$('.loading_mom_container').style.display = 'none';
                    _.$(_.e('arrow_guide_img')).style.display = 'block';
                    that.loaded = true;
                    that.containerHeight = parseInt(getComputedStyle(_.$(_.e(that.className))).height, 10);
                }, 0)
            }
        }
        tmp_img.src = images[index];
        //start play audio
        this.bgAudio.play();
    }

    toggleAudio() {
        let _ = require('../middleware/utils');
        _.e = _.str2class;
        let ele = _.$(_.e(this.sts.audio));
        let classes = ele.classList;
        if (!classes.contains('pause')) {
            ele.classList.add('pause');
            this.bgAudio.pause();
        } else {
            ele.classList.remove('pause');
            this.bgAudio.play();
        }
    }
    pauseAudio(){
        document.querySelector('.'+this.sts.audio).classList.add('pause');
        this.bgAudio.pause();
    }

    listen() {
        let that = this;
        let _ = require('../middleware/utils');
        _.e = _.str2class;
        let tranReg = /((?:-|)\d+(?:\.|)(?:\d+|))%/;
        let slide = 'sliding';
        let startY, moveY, cur;
        let $helper = _.$(_.e(this.sts.helper)).style;
        let _transform = 'translate3d(0,0%,0)';
        let guide = 'guide_mom_collection';
        let rate = 2 / 5;
        $helper.transform = _transform;
        $helper.webkitTransform = _transform;
        return [{
            momId: _.e(this.className),
            uid: _.e(this.sts.helper),
            oppressId: _.e(this.className),
            ontouchstart(binded, evt, oppressId){
                if (!that.loaded)
                    return;
                let style = binded.style;
                cur = parseInt((style.transform || style.webkitTransform).match(tranReg)[1], 10);

                startY = evt.touches[0].clientY;
                binded.classList.add(slide);

            },
            ontouchmove(binded, evt){
                if (!that.loaded)
                    return;

                let offSet;
                moveY = -startY + evt.touches[0].clientY;
                offSet = cur + 100 * Number((moveY * rate / that.containerHeight).toFixed(2));
                offSet = 'translate3d(0,' + offSet + '%,0)';
                binded.style.transform = offSet;
                binded.style.webkitTransform = offSet;
            },
            ontouchend(binded, evt, oppressId){
                if (!that.loaded)
                    return;
                let _style = binded.style;
                cur = parseInt((_style.transform || _style.webkitTransform).match(tranReg)[1], 10);
                let index = parseInt(~~(cur / 100), 10);
                if (moveY < 0) {
                    index--;
                }
                if (index < -5) {
                    index = -5;
                } else if (index > 0) {
                    index = 0;
                }
                _.$(_.e(guide)).style.display = (index == -5) ? "none" : "block";

                let _transform = 'translate3d(0,' + index * 100 + '%,0)';
                binded.classList.remove(slide);
                setTimeout(function () {
                    _style.transform = _transform;
                    _style.webkitTransform = _transform;
                }, 0);

                var showing = _.$('.showing');
                if (showing) {
                    showing.classList.remove('showing');
                }
                _.$$(_.e(that.sts.child))[Math.abs(index)].classList.add('showing');


            }
        }, {
            momId: _.e(this.className),
            uid: _.e(this.sts.audio),
            ontouchstart(binded){
                that.toggleAudio();
            }
        }]
    }
}
Base.render(new preHeat(), '.cc', 'inner');